import React, { Component } from "react";

class even extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "你好",
      value: 1,
    };
    this.myInput = React.createRef();
    // this.handleClick = this.handleClick.bind(this)
    this.bnt1=this.bnt1.bind(this)
  }
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.myInput.current.focus();
  }
  hand() {
    // this.setState({ title: this.state.value++ });
    this.setState((prevState,props) => ({
      title: prevState.value++
    }));
  }
  handleChange(event) {
    // console.log(event,'shuju ')
    this.setState({ value: event.target.value });
  }
  bnt1(){
    console.log('bnt1')
  }
  bnt2=()=>{
    console.log('bnt2')
  }
  bnt3(){
    console.log('bnt3')
  }
  bnt4(){
    console.log('bnt4')
  }
  render() {
    let { title } = this.state;
    var value = this.state.value;
    return (
      <div>
        <p>我是even</p>
        <div>
          <input type="text" ref={this.myInput} />
          {/* <input type="text" ref={this.myInput} /> */}
        </div>
        <div>
          <input
            type="button"
            value="点我输入框获取焦点"
            onClick={this.handleClick.bind(this)}
          />
        </div>
        <button onClick={() => this.hand()}>按钮 </button>
        <p>
          {title},{this.state.value}
        </p>
        <input
          type="text"
          value={value}
          onChange={this.handleChange.bind(this)}
        />
        <p>{value}</p>
        <div onClick={this.bnt1}>bnt1</div>
        <div onClick={this.bnt2}>bnt2</div>
        <div onClick={this.bnt3.bind(this)}>bnt3</div>
        <div onClick={() => this.bnt4()}>bnt4</div>
      </div>
    );
  }
}

export default even;
